<template>
	<div id="building">
	<h3 style="color: #DCCFCF;font-size: 50px">欢迎使用自动化办公系统</h3>
	<div class="login-box">
	<el-form 
		:label-position="labelPosition"
		label-width="100px"
		:model="user"
		style="max-width: 350px;margin: 0px auto;"
	>
	
		<el-form-item label="用户名">
			<el-input v-model="user.userId" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item label="密码">
			<el-input type="password" v-model="user.userPassword" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-button type="info" plain @click="submit">确定</el-button>
	</el-form>
	</div>
	</div>
</template>

<script>
	import qs from 'qs'
	import {ElMessage} from 'element-plus'
	export default {
		data(){
			return{
				user:{},
				Errors:""
			}
		},
		methods:{
			submit(){
				let that=this
				let str=qs.stringify(that.user)
				
				that.$axios.get("http://localhost:8080/user/login?"+str).then(function(res){
					if(res.data!=null && res.data!=''){
						//that.$store.commit('user',res.data)
						
						sessionStorage.setItem("user",JSON.stringify(res.data))
						
						that.$router.push("/index")
					}else{
						ElMessage.error('用户名或者账号错误！')
					}
				})
			}
		}
	}
</script>

<style>
	#building{
	  background:url("../assets/1.jpg");
	  width:100%;
	  height:100%;
	  position:fixed;
	  background-size:100% 100%;
	}
	.login-box{
	  border:1px solid #dccfcf;
	  width: 350px;
	  margin:180px auto;
	  padding: 35px 80px 15px 35px;
	  border-radius: 5px;
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  box-shadow: 0 0 25px #909399;
	  background-color:rgba(255,255,255,0.7);
	}
</style>
